import { history } from 'umi';
import React, { useState } from 'react';
import { Flex, NavBar, Input, Form, Picker, Button, Image, Checkbox, Radio, ActionSheet } from 'react-vant';
import { SafeArea } from 'antd-mobile';
import './profile.less';

const goBack = () => {
  history.back();
}
const goJoinResult = () => {
  history.push('/join-result');
}

export default function JoinYxPage() {
  const [form] = Form.useForm()
  const [visible, setVisible] = useState(false)
  const onCancel = () => setVisible(false)
  return (
    <div className='join-yx'>
      <NavBar title='营销入驻'
              leftText='返回'
              onClickLeft={goBack}
              rightText={
                <Flex className='profile-user' align='center'>
                  <Flex.Item className='profile-user-avatar'>
                    <Image round width='24' height='24' fit='cover'
                           src='//res.dayupp.com/partner/9fa863d7ab9db21d6763ad29fa4695c1.jpg' />
                  </Flex.Item>
                  <Flex.Item className='profile-user-name'>小熊</Flex.Item>
                </Flex>
              } />
      <div className='container'>
        <div className='profile-yx-content'>
          <h4 className='yx-title'>营销分佣规则：</h4>
          <ol>
            <li>自然月第1-30单，佣金10%；</li>
            <li>自然月第31-50单，佣金15%；</li>
            <li>自然月第51单开始，佣金20%；</li>
          </ol>
        </div>
        <Form form={form} className='profile-form'>
          <h3 className='profile-title'>基本资料（请真实填写）</h3>
          <Form.Item
            rules={[{ required: true, message: '姓名为必填项' }]}
            name='nickname'
            label='姓名'
          >
            <Input placeholder='请填写您的姓名' />
          </Form.Item>
          <Form.Item
            rules={[{ required: true, message: '微信号为必填项' }]}
            name='wechat'
            label='微信'
          >
            <Input placeholder='请填写您的微信号' />
          </Form.Item>
          <Form.Item
            rules={[{ required: true, message: '手机号为必填项' }]}
            name='mobile'
            label='手机'
          >
            <Input type='tel' placeholder='请填写您的手机号' maxLength={11} />
          </Form.Item>
          <Form.Item
            rules={[{ required: true, message: '性别为必填项' }]}
            name='gender'
            label='性别'
          >
            <Radio.Group direction='horizontal' defaultValue='1'>
              <Radio name='1' checkedColor='#a880ff'>男</Radio>
              <Radio name='0' checkedColor='#a880ff'>女</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item
            isLink
            rules={[{ required: true, message: '所在城市为必选项' }]}
            name='city'
            label='城市'
            trigger='onConfirm'
            onClick={(_, action) => {
              // @ts-ignore
              action.current?.open();
            }}
          >
            <Picker
              defaultValue='武汉'
              popup
              columns={[
                '武汉',
                '长沙',
                '成都',
              ]}
            >
              {val => val || '请选择所在城市'}
            </Picker>
          </Form.Item>
          <Form.Item
            rules={[{ required: false }]}
            name='customer'
            label='客户群体'
          >
            <Input placeholder='请填写您的客户群体' />
          </Form.Item>
          <Form.Item
            rules={[{ required: false, message: '请填写个人介绍' }]}
            name='intro'
            label='个人介绍'
          >
            <Input.TextArea rows={3} autoSize maxLength={140} showWordLimit
                            placeholder='请填写个人介绍' />
          </Form.Item>
          <Form.Item
            rules={[{ required: false }]}
            name='invitecode'
            label='营销邀请码'
          >
            <Input placeholder='请填写营销邀请码' />
          </Form.Item>
          <Form.Item
            name='agreement'
            rules={[{ required: true, message: '必须同意平台用户协议' }]}
          >
            <Checkbox checkedColor='#a880ff'>
              <div className='agreement'>请先阅读并同意<span onClick={() => setVisible(true)}>《用户协议》</span></div>
            </Checkbox>
          </Form.Item>
          <Button className='profile-submit-btn' round nativeType='submit' type='primary' size='large'
                  color='linear-gradient(to right, #454545, #111)' block onClick={goJoinResult}>
            提 交
          </Button>
          <SafeArea position='bottom' />
        </Form>
      </div>
      <ActionSheet title='用户协议' visible={visible} onCancel={onCancel}>
        <div className='user-agreement'>
          <p>感谢您选择并信任大鱼约玩！请仔细阅读本条款，同意后方可进行下一步。</p>
          <p><strong>大鱼约玩是一个健康绿色的约玩平台。平台仅提供绿色约玩媒介服务，严令禁止一切违反法律法规，破坏社会秩序的行为！</strong></p>
          <p>我们秉承合作共赢的态度去积极建立与营销搭档的良好合作关系。为了维持良好的合作关系，我们也制定了一些行为准则来约束合作伙伴的行为。</p>
          <p><strong>平台严令禁止的行为：</strong></p>
          <ol>
            <li>01、禁止以色情或低俗擦边的形式吸引客户来平台下单，让客户对平台产生误解。</li>
            <li>02、禁止诱导/教唆客户通过非本平台的第三方进行交易，如使用微信、支付宝、现金红包、转账等支付方式均属于第三方私下交易范畴。</li>
            <li>03、禁止发布宣传竞品的言论，宣传、鼓励使用其他竞品平台，以任何形式传播非本平台授权的平台或工具、广告信息等。</li>
            <li>04、若代客户下单，禁止多收客户钱，虚假报账行为。</li>
            <li>05、若代客户下单，禁止收钱不派单，拿钱跑路行为。</li>
            <li>06、禁止帮助客户灌酒的行为。</li>
            <li>07、禁止诱导/教唆陪玩搭档向客户提供非订单内容之外的任何服务。</li>
          </ol>
          <p><strong>触发以上违规行为，平台将有权终止合作，并封禁账户，情节严重的将移交公安机关处理。</strong></p>
        </div>
      </ActionSheet>
    </div>
  );
}
